<!--
 * @Descripttion: 目录管理
 * @version: 
 * @Author: 穆宏宇
 * @Date: 2020-11-23 13:56:38
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-24 14:25:25
-->
<!-- 不带图片上传 -->
<template>
  <div class="catalogue-manager">
    <el-row type="flex" justify="end" class="mb10">
      <!-- <el-col :span="6"> -->
        <el-button type="success" size="small" @click="openDialogEdit('root',{})">
            新建根节点
          </el-button>
      <!-- </el-col> -->
    </el-row>
    <el-table
      :data="tableData"
      ref="table"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :height="maxHeightNow"
      :tree-props="{children: 'children', hasChildren: 'haveChildren'}">
      <el-table-column
        minWidth="320px"
        prop="categoryName"
        label="商品目录">
      </el-table-column>
      <el-table-column
        width="150px"
        label="有效性">
        <template slot-scope="scope">
          {{scope.row.v==='1'?'有效':'无效'}}
        </template>
      </el-table-column>
      <el-table-column
        width="170px"
        label="类型">
        <template slot-scope="scope">
          {{scope.row.itemType==='0'?'办公用品':scope.row.itemType==='1'?'工业用品':''}}
        </template>
      </el-table-column>
      <el-table-column
        width="170px"
        label="商品类型">
        <template slot-scope="scope">
          {{scope.row.categoryItemType==='2'?'撮合':scope.row.categoryItemType==='1'?'自营':''}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="470">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="openDialogEdit('new',scope.row)">
            新建子节点
          </el-button>
          <el-button type="primary" size="mini" @click="openDialogEdit('edit',scope.row)">
            修改
          </el-button>
          <el-button :type="scope.row.v==='1'?'danger':'success'" size="mini" @click="invalidItemCategoryFn(scope.row)">
            {{scope.row.v==='1'?'置为无效':'置为有效'}}
          </el-button>
          <el-button type="warning" size="mini" v-if="scope.row.categoryLevel===1" @click="openDialogSort(scope.row)">
            设置显示目录
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 增改查 -->
    <el-dialog :title="titleObj[pageType]" :visible.sync="dialogVisible" width="580px" >
      <el-form ref="form" :model="form" label-width="110px" :rules="rules" label-suffix=":">
        <el-form-item label="父级目录名称" prop="" v-if="pageType==='new'">
          {{parentName}}
        </el-form-item>
        <el-form-item label="商品目录名称" prop="categoryName">
          <el-input v-model="form.categoryName"></el-input>
        </el-form-item>
        <el-form-item label="商品目录类型" prop="itemType">
		  <el-select v-model="form.itemType"> 
		  	<el-option value="1" label="自营">自营</el-option>
		  	<el-option value="2" label="撮合">撮合</el-option>
		  </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="">
          <el-input v-model="form.sorts"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 设置导航中显示的目录 -->
    <el-dialog title="设置导航中显示的目录" :visible.sync="dialogVisibleSort" width="580px" >
      <el-form ref="sortForm" :model="sortForm" label-width="110px" :rules="rules" label-suffix=":">
        <el-form-item label="类型" prop="itemType">
          <el-radio v-model="sortForm.itemType" label="0">办公用品</el-radio>
          <el-radio v-model="sortForm.itemType" label="1">工业用品</el-radio>
        </el-form-item>
        <el-form-item label="导航栏排序" prop="">
          <el-input v-model="sortForm.itemOrder"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleSort = false">取 消</el-button>
        <el-button type="primary" @click="saveSort()">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { queryGodCategoryZtreeAsyn, addItemCategory, editItemCategory, invalidItemCategory, updateOfficeSupplies } from '@/api/admin.api'
export default {
    name: 'catalogue-manager',
   data () {
     return {
        pageType: '',
        titleObj: {
          root: '新增根节点',
          new: '新增子节点',
          edit: '修改目录',
          root: '新增根节点',
        },
        tableData: [],
        dialogVisible: false,
        dialogVisibleSort: false,
        form: {
          categoryName: '',
          sorts: '',
		  itemType:'自营'
        },
        parentName: '',
        sortForm: {
          itemOrder: '',
          itemType: ''
        },
        rules: {
          categoryName: [
            { required: true, trigger: 'blur',message: '请输入商品目录名称'}
          ],
          itemType: [
            { required: true, trigger: 'change',message: '请选择类型'}
          ]
        }
     }
   },
    computed: {
    // 表格高度
    maxHeightNow () {
      const height = window.innerHeight
      return height -  162
    }
  },
   mounted(){
     this.getTree()
   },
   methods: {
     getTree(){
       queryGodCategoryZtreeAsyn('','').then(res=>{
          this.tableData = res
       })
     },
      load(tree, treeNode, resolve) {
        const parentId =  tree.id
        queryGodCategoryZtreeAsyn(parentId,'').then(res=>{
          resolve(res)
        }).catch(err=>{
          console.log(err);
          resolve([])
        })
      },
      refreshRow(id){
        queryGodCategoryZtreeAsyn(id,'').then(res => {
          if (res&&res.length) {
            this.$set(this.$refs.table.store.states.lazyTreeNodeMap, id, res)
          }
        })
      },
      openDialogEdit(type,row){
        this.pageType = type
        const {categoryName, sorts, id, parentCategoryId, categoryLevel} = row
        switch (type) {
          case 'root':
            this.form = {v: '1',categoryLevel: '1',itemType:row.categoryItemType}
            this.dialogVisible = true
            break;
          case 'new':
            this.parentName = categoryName
            this.form = {parentCategoryId: id, v: '1',categoryLevel: categoryLevel?categoryLevel+1:1,itemType:row.categoryItemType}
            this.dialogVisible = true
            break;
          case 'edit':
            this.form = {categoryName, sorts, id, parentCategoryId, categoryLevel,itemType:row.categoryItemType}
            this.dialogVisible = true
            break;
          default:
            break;
        }
      },
      save(row){
        let pid = this.form.parentCategoryId||''
        this.$refs.form.validate((valid) => {
          if (valid) {
            switch (this.pageType) {
              case 'root':
              case 'new':
                addItemCategory(this.form).then(res=>{
                  this.$alert('保存成功', '提示', {
                    confirmButtonText: '确定',
                    type: 'success',
                    callback: action => {
                      this.parentName = ''
                      this.refreshRow(pid)
                      this.dialogVisible = false;
                    }
                  })
                })
                break;
              case 'edit':
                editItemCategory(this.form).then(res=>{
                  this.$alert('保存成功', '提示', {
                    confirmButtonText: '确定',
                    type: 'success',
                    callback: action => {
                      if (pid) {
                        this.refreshRow(pid)
                      }else{
                        this.getTree()
                      }
                      this.dialogVisible = false;
                    }
                  })
                })
                break;
            
              default:
                break;
            }
          }
        })
      },
      // 设置有效性
      invalidItemCategoryFn(row){
        const data = {
          id: row.id,
          v: row.v==='1'?'0':'1'
        }
        const pid = this.form.parentCategoryId||''
        this.$alert(`确定置为${row.v==='1'?'无效':'有效'}吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success',
          callback: action => {
            if (action === 'confirm') {
              invalidItemCategory(data).then(res=>{
                this.$alert('保存成功', '提示', {
                  confirmButtonText: '确定',
                  type: 'success',
                  callback: action => {
                    if (pid) {
                      this.refreshRow(pid)
                    }else{
                      this.getTree()
                    }
                  }
                })
              })
            }
          }
        })
      },
      // 以下fn 第二个弹窗相关
      openDialogSort(row){
        this.sortForm.categoryId = row.id
        this.sortForm.itemType = row.itemType
        this.sortForm.itemOrder = row.itemOrder
        this.dialogVisibleSort = true
      },
      saveSort(){
        this.$refs.sortForm.validate((valid) => {
          if (valid) {
            let data = {
              // NavUpdateDtoNavUpdateDto: {
                categoryId: this.sortForm.categoryId,
                itemOrder: this.sortForm.itemOrder,
                itemType: this.sortForm.itemType,
              // }
            }
            updateOfficeSupplies(data).then(res=>{
                this.$alert('保存成功', '提示', {
                  confirmButtonText: '确定',
                  type: 'success',
                  callback: action => {
                    this.getTree()
                    this.dialogVisibleSort = false
                  }
                })
            })
          }
        })
      }
   }
}
</script>

<style lang='scss'>

  .catalogue-manager {
    th,
    td,
    tr {
      text-align: left !important;
      padding-left: 40px;
      padding-right: 40px;
    }
    .mb10{
      margin-bottom: 10px;
    }
  }
</style>
